<div class="tabPanel" data-dojo-attach-point="lineContainer">
  
  <div class="controls">
  
      <div class="controlGroup">
          <label>From</label>
          <div class="controlItem">
            <select data-dojo-attach-point="lineTypeDD" style="width: 225px" data-dojo-type="dijit/form/Select">
              <option value="DistAndBearing">Distance and Bearing</option>
              <option selected="selected" value="Points">Points</option>
            </select>
        </div>
      </div>

      <div class="controlGroup" data-dojo-attach-point="startDiv">
          <label data-dojo-attach-point="lineStartPointLabel">Start Point</label>
          <div class="controlItem">
            <input class="jimu-input coordInput" 
              data-dojo-attach-point="startPointCoordsLine">
            </input>
            <div class="controlItem paddedLeft" data-dojo-attach-point="addPointBtnStartDiv">
              <div class='add-with-icon'>
                <span title="Format Input" class="jimu-icon jimu-icon-setting" data-dojo-attach-point="coordinateFormatButtonStart"></span>
              </div>
              <div class='add-with-icon'>
                <div title="Draw Line" class="draw" data-dojo-attach-point="addPointBtnStart"></div>
              </div>
            </div>
        </div>
      </div>
      
      <div class="controlGroup">
          <input class="interactive-checkbox" type="checkbox" data-dojo-attach-point="interactiveLine" />
          <label data-dojo-attach-point="interactiveLabel">Create Line Interactively</label>
      </div>

      <div class="controlGroup endPt">
        <label data-dojo-attach-point="lineEndPointLabel">End Point</label>
        <div class="controlItem">
          <input class="jimu-input coordInput" 
            data-dojo-attach-point="endPointCoordsLine">
          </input>
          <div class="controlItem paddedLeft" data-dojo-attach-point="addPointBtnEndDiv">              
              <div class='add-with-icon'>
                <span title="Format Input" class="jimu-icon jimu-icon-setting" data-dojo-attach-point="coordinateFormatButtonEnd"></span>
              </div>
              <div class='add-with-icon'>
                <div title="Add Point" class="draw" data-dojo-attach-point="addPointBtnEnd"></div>
              </div>
            </div>
        </div>
      </div>

      <div class="controlGroup">
        <label>Length</label>
        <div class="controlItem" data-dojo-attach-point="lengthInputDiv">
          <input
            data-dojo-type='dijit/form/NumberTextBox'
            required="true" value="1000" data-dojo-props="
            constraints: {min: 1, max: 40030000},
            invalidMessage: 'Please enter a numeric value.',
            rangeMessage: 'Invalid Line Length'"
            data-dojo-attach-point="lengthInput"
            data-dojo-attach-event="keyup: checkValidInputs">
          </input>
          <select style="width: 100px" class="controlSpace noResize" data-dojo-type="dijit/form/Select" data-dojo-attach-point="lengthUnitDD" >
            <option value="feet">Feet</option>
            <option value="kilometers">Kilometers</option>
            <option value="miles">Miles</option>
            <option value="meters" selected="selected">Meters</option>
            <option value="nautical-miles">Nautical Miles</option>
            <option value="yards">Yards</option>
          </select>
        </div>
      </div>      

      <div class="controlGroup">
        <label>Angle</label>
        <div class="controlItem" data-dojo-attach-point="angleInputDiv">
          <input data-dojo-type="dijit/form/NumberTextBox"
            required="true"
            value="0"
            data-dojo-props="
              constraints: {min: 0, max: 360},
              invalidMessage: 'The value entered must be numeric.',
              rangeMessage: 'Value must be between 0 and 360'"
            data-dojo-attach-point="angleInput"
            data-dojo-attach-event="onChange: checkValidInputs">
          </input>
          <select style="width: 100px" class="controlSpace" data-dojo-type="dijit/form/Select" data-dojo-attach-point="angleUnitDD">
            <option value="degrees">Degrees</option>
            <option value="mils">Mils</option>
          </select>
        </div>
      </div>
      
      <div class="buttonContainer">
          <div class='jimu-btn jimu-state-disabled' data-dojo-attach-point='okButton' data-dojo-attach-event="onclick: okButtonClicked">OK</div>
          <div class='jimu-btn' data-dojo-attach-point='clearGraphicsButton' data-dojo-attach-event="onclick: clearGraphics">Clear Graphics</div>
      </div>

    </div>
</div>
